<template>
  <div ref="rootEl" class="chat-main">
    <ul class="list">
      <ChatMessage v-for="_ in state.msgList" :key="_.id" :msg="_" />
    </ul>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import ChatMessage from './ChatMessage.vue';
import { state } from '../store';

/** @type {import('vue').Ref<HTMLDivElement>} */
const rootEl = ref()

watch(() => state.msgList.length, async v => {
  await nextTick()
  const el = rootEl.value
  if (el) {
    el.scrollTop = el.scrollHeight
  }
})
</script>

<style lang="scss">
.chat-main {
  flex: 1;
  height: 0;
  overflow-y: auto;
  background-color: #fff;
  padding: 16px;
}
</style>
